import Header1 from '../components/Header1';
import Bottom from '../components/Bottom';
import diyi from '../images/diyi.jpg'
import dier from '../images/dier.jpg'
import disan from '../images/disan.jpg'
import disi from '../images/disi.jpg'
import { Link, NavLink } from 'react-router-dom'
import { useState, useEffect } from 'react';
import './Home.css'
import axios from 'axios'
import { Carousel } from 'antd';
const Home = (props) => {

  const [list, setList] = useState([]);
  useEffect(() => {
    const url = "http://192.168.72.166:8080/api/getShowDatas";
    axios.get(url).then(res => {
      const data = res.data.data;
      data.forEach((item) => {
        let name = "http://192.168.72.166:8080/" + item.show_name;
        setList((list) => [
          ...list,
          {
            name: name,
            id: item.show_id,
            token: item.show_token
          }
        ])
      });
    })
  }, [])




  return (
    <div >

      <Header1 />
      <div className='home'>

        {/* <div className='content-1'><img src={轮播3}/></div> */}
        <Carousel autoplay>
          {
            list.map(item => {
              if (item.token == '首页未登入轮') {
                return (
                  <div className='content-1'>
                    <img src={item.name} />
                  </div>
                )
              }
            })
          }
        </Carousel>

        <div className='content-2'>
          <div className='content-2-1'>
            <p>格物衍艺</p>
            <p>集文化、文创以及设计于一身的平台</p>
            <p>全方面了解传统文化以及文创作品</p>
          </div>
        </div>
        <div className='content-3'>
          <div className='content-3-1'>
            <p>2D设计、3D高清渲染,让文创设计更简单</p>
            <p><NavLink to='/login'><button>立 即 登 入</button></NavLink></p>
          </div>
        </div>
        <div className='content-4'>
          <div className='content-4-1'>
            <p className='content-4-1-1'>先行预览</p>
            <p className='content-4-1-2'>文创设计产品全覆盖</p>
            <p className='content-4-1-2'>在这里，你可以设计属于自己的文创，也可以欣赏他人的文创</p>
          </div>
          <div className='content-4-2'>
            {
              list.map(item => {
                if (item.token == '首页未登入展') {
                  return (
                    <img src={item.name} id='img1' />
                  )
                }
              })
            }
          </div>
          <p className='p1'><NavLink to='/login'><button>登 入 设 计</button></NavLink></p>
        </div>
        <div className='content-5'>
          <div className='content-5-1'>
            <p className='content-5-1-1'>适用于企业及应用场景</p>
          </div>
          <div className='content-5-2'>
            <div className='content-5-2-1'><img src={diyi} />
              <p className='content-5-2-2'>公司产业设计</p>
              <p className='content-5-2-3'>海量模板 快速设计</p>
            </div>
            <div className='content-5-2-1'><img src={dier} />
              <p className='content-5-2-2'>活动举办需要</p>
              <p className='content-5-2-3'>小批量订单虚拟3D打样</p>
            </div>
            <div className='content-5-2-1'><img src={disan} />
              <p className='content-5-2-2'>个人喜好设计</p>
              <p className='content-5-2-3'>消费者个性化定制营销</p>
            </div>
            <div className='content-5-2-1'><img src={disi} />
              <p className='content-5-2-2'>网上宣传需要</p>
              <p className='content-5-2-3'>作品赋能 吸引更多用户</p>
            </div>
          </div>
        </div>
        <Bottom />

      </div>

    </div>
  )
}
export default Home;

